会话列表，新建会话，删除会话

<template>
  <div class="session-list-container" style="padding: 20px">
    <!-- 操作按钮 -->
    <el-button type="primary" @click="showCreateDialog = true" style="margin-bottom: 20px">
      + 新建会话
    </el-button>

    <!-- 会话表格 -->
    <el-table :data="sessions" style="width: 100%" border>
      <el-table-column prop="name" label="会话名称" width="220" />

      <el-table-column label="角色卡" width="150">
        <template #default="scope">
          {{ scope.row.character_card?.name || '未知角色' }}
        </template>
      </el-table-column>

      <el-table-column label="会话开始时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.startTime) }}
        </template>
      </el-table-column>

      <el-table-column label="会话最后时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.endTime) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="150">
        <template #default="scope">
          <!-- 删除按钮 -->
          <el-button
            size="small"
            type="danger"
            @click="confirmDelete(scope.$index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新建会话对话框 -->
    <el-dialog v-model="showCreateDialog" title="新建会话" width="30%">
      <el-form :model="createForm" :rules="rules" ref="createFormRef">
        <el-form-item label="会话名称" prop="name" label-width="80px">
          <el-input v-model="createForm.name" placeholder="请输入会话名称" />
        </el-form-item>

        <el-form-item label="角色卡" prop="character_card" label-width="80px">
          <el-select v-model="createForm.character_card" placeholder="请选择角色" style="width: 100%">
            <el-option
              v-for="character in characterList"
              :key="character.id"
              :label="character.name"
              :value="character"
            >
              <!-- 可显示头衔 -->
              {{ character.name }} ({{ character.title }})
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCreateDialog = false">取消</el-button>
          <el-button type="primary" @click="createSession">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElTable, ElTableColumn, ElButton, ElMessage,ElMessageBox, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus'

// 会话数据（endTime 为 null 表示仍在进行）
const sessions = ref([
  {
    id: 1,
    name: '与停云的初次对话',
    character_card: {
    id: 'tingyun',
    name: '停云',
    title: '赤霄剑首弟子'
    },
    startTime: new Date('2025-09-20 10:30:00'),
    endTime: new Date('2025-09-20 11:45:23'),
  },
  {
    id: 2,
    name: '星核猎手情报分析',
    startTime: new Date('2025-09-21 14:20:10'),
    endTime: new Date('2025-09-20 11:45:23'),
  },
])

// 模拟已加载的角色列表（通常来自 character_loader.load_all_characters()）
const characterList = ref([
  { id: 'tingyun', name: '停云', title: '赤霄剑首弟子', faction: '仙舟·罗浮' },
  { id: 'fu_xuan', name: '符玄', title: '太卜', faction: '仙舟·罗浮' },
  { id: 'dan_heng', name: '丹恒', title: '云骑军剑士', faction: '仙舟·罗浮' },
  { id: 'san_yue_qi', name: '三月七', title: '星穹列车成员', faction: '星穹列车' },
])

// 生成唯一 ID（实际项目可使用后端 ID）
const generateId = () => {
  return sessions.value.length ? Math.max(...sessions.value.map(s => s.id)) + 1 : 1
}



// 新建会话相关
const showCreateDialog = ref(false)
const createForm = reactive({
  name: '',
  character_card: '',
})

const createFormRef = ref(null)

// 校验规则
const rules = {
  name: [
    { required: true, message: '请输入会话名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ]
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return 'N/A'
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
  }).format(date)
}

// 新建会话
const createSession = () => {
    //它会自动检查表单中所有带 rules 的字段是否通过验证
    createFormRef.value?.validate((valid) => {
        if (!valid) return

        const newSession = {
        id: generateId(),
        name: createForm.name,
        character_card: createForm.character_card,
        startTime: new Date(),
        endTime: new Date(),
        }

        // 添加到列表顶部
        sessions.value.unshift(newSession)

        // 重置并关闭对话框
        createForm.name = ''
        createForm.character_card = ''
        showCreateDialog.value = false
        ElMessage.success('会话已创建')
    })
}

// 删除会话
const confirmDelete = (index) => {
  ElMessageBox.confirm('确定要删除此会话吗？此操作不可恢复。', '警告', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      sessions.value.splice(index, 1)
      ElMessage.success('会话已删除')
    })
    .catch(() => {})
}
</script>

<style scoped>
.dialog-footer .el-button:first-child {
  margin-right: 10px;
}
</style>